<template>
	<view class="gui-padding">
		<view class="gui-margin-top-large"></view>
		<form @submit="submit">
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label" style="width: 150rpx;">商品封面图</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change2" ref="uploadimgcom" @uploaded="uploaded"
					:uploadServerUrl="upload_url"></gui-upload-images>
			</view>


			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">商品名称</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.title" name="title"
						placeholder="请输入商品名称" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">商品单价</text>
				<view class="gui-form-body">
					<input type="number" class="gui-form-input" v-model="formData.money" name="money"
						placeholder="请输入商品单价(元)" />
				</view>
			</view>


			<view class="gui-margin-top">
				<text class="gui-text-small gui-color-gray">商品使用详情</text>
			</view>
			<view>
				<textarea v-model="formData.notice" name="notice" value="" placeholder="请输入商品使用详情"
					class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;" />
			</view>

			<view class="gui-margin-top">
				<!-- 动态表单元素 -->
				<view class="" v-for="(item,index) in formData.tag" :key="index">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label">标签</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="item.name" placeholder="请输入标签名称" />
						</view>
					</view>

					<view class="gui-flex gui-rows gui-justify-content-end">
						<text class="gui-icons remove-btn gui-block-text gui-bg-blue gui-color-white"
							@tap="removeItem(index)">&#xe636; 删除</text>
					</view>
				</view>
				<!-- 添加按钮 -->
				<view>
					<text class="center-btn gui-block-text gui-icons gui-color-blue" @tap="addStudents">&#xe6c7;
						添加新标签</text>
				</view>
			</view>


			<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;" formType="submit">
					<text class="gui-icons gui-color-white gui-button-text">{{btn_name}}</text>
				</button>
			</view>
			<view style="height:80rpx;"></view>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 表单数据存储
				formData: {
					title: '',
					money: '',
					notice: '',
					tag: [{
						name: ''
					}],
				},
				// 密码可视 类型切换
				isPwd: true,
				// picker 
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0,
				id: 0,
				btn_name: '提交',
				needPploadedImgs: [],
				upload_url: this.serverUrl + '/api.common/upload',
				is_upload: 1

			}
		},
		onLoad: function(query) {
			this.$globalMethod();
			uni.setNavigationBarTitle({
				title: '商品添加'
			})
			if (typeof query.id != 'undefined') {
				this.id = query.id;
				uni.setNavigationBarTitle({
					title: '商品编辑'
				});
				this.btn_name = '保存';
				this.get_goods_details();
			}
		},
		methods: {
			get_goods_details() {
				let _this = this;
				_this.graceJS.get(_this.serverUrl+'/api.goods/goods_details', {
					id: _this.id
				}, {
					token: _this.token
				}, (res) => {
					if (res.code == 0) {
						
						_this.formData.title = res.data.goods_details.title;
						_this.formData.money = res.data.goods_details.money;
						_this.formData.notice = res.data.goods_details.notice;
						_this.formData.tag = res.data.goods_details.tag;
						if (res.data.goods_photos.length > 0) {
							_this.is_upload = 0;
							for (var i = 0; i < res.data.goods_photos.length; i++) {
								_this.$refs.uploadimgcom.setItems(
									[
										res.data.goods_photos[i].url
									]);
							}
							_this.is_upload = 1;
						}

					} else {
						uni.navigateTo({
							url: '/pages/shop/goods_list',
							success: function() {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					}
				}, (e) => {
					uni.showToast({
						title: '网络请求错误，请稍后再试',
						icon: 'none'
					})
				})
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				let _this = this;

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				uploadedImgs.forEach((image, index) => {
					uni.uploadFile({
						url: _this.upload_url, //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs[index].progress = 100;
								_this.needPploadedImgs[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})

			},
			change3: function(data) {
				console.log(data);
			},
			change2: function(e) {
				this.needPploadedImgs = e;
				if (this.is_upload == 1) {
					this.uploaded(this.needPploadedImgs);
				}
			},
			// 表单提交
			submit: function(e) {
				// 部分能够获得的表单数据 在 e 对象保存
				// 不支持表单直接获取的数据通过事件记录
				// 最终整理获得完整的表单记录
				var fromData = e.detail.value;
				fromData['img_url_arr'] = this.needPploadedImgs;
				fromData['tag'] = this.formData.tag;

				let _this = this;
				if (_this.id == 0) {
					var url = _this.serverUrl + '/api.goods/add_goods';
				} else {
					var url = _this.serverUrl + '/api.goods/edit_goods';
					fromData['id'] = _this.id;
				}

				_this.graceJS.post(url, fromData, 'json', {
					token: _this.token
				}, (res) => {
					if (res.code == 0) {
						uni.navigateTo({
							url: '/pages/shop/goods_list',
							success: function() {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}, (e) => {
					uni.showToast({
						title: '网络请求错误，请稍后再试',
						icon: 'none'
					})
				})


			},
			addStudents: function() {
				this.formData.tag.push({
					name: ''
				});
			},
			removeItem: function(index) {
				this.formData.tag.splice(index, 1);
			},
		}
	}
</script>
<style scoped>
	.gui-text-small {
		line-height: 50rpx;
	}

	.remove-btn {
		width: 128rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		border-radius: 3px;
		margin: 25rpx 0;
	}

	.center-btn {
		text-align: center;
		line-height: 66rpx;
		width: 690rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.submit-btn {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
	}

	.gui-text-area {
		font-size: 26rpx;
		color: #2B2E3D;
		height: 150rpx;
		padding: 20rpx;
	}

	.demo-sub-btn {
		padding: 10rpx 25rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		border-radius: 6rpx;
	}
</style>